import { TabBar } from 'antd-mobile'
import home from '../assets/home.svg'
import homeSelect from '../assets/home_select.svg'
import acceptance from '../assets/acceptance.svg'
import acceptanceSelect from '../assets/acceptance_select.svg'
import lease from '../assets/lease.svg'
import leaseSelect from '../assets/lease_select.svg'
import me from '../assets/me.svg'
import meSelect from '../assets/me_select.svg'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'

export default function MainLayout() {
  const navigate = useNavigate()
  const { pathname } = useLocation()

  const tabs = [
    { key: '/home', title: '首页', icon: { normal: home, active: homeSelect } },
    { key: '/acceptance', title: '接房列表', icon: { normal: acceptance, active: acceptanceSelect } },
    { key: '/lease', title: '退租管理', icon: { normal: lease, active: leaseSelect } },
    { key: '/mine', title: '我的', icon: { normal: me, active: meSelect } },
  ]

  const showTab = tabs.some(t => t.key === pathname)

  return (
    <div style={{ paddingBottom: showTab ? 50 : 0 }}>
      <div style={{ minHeight: showTab ? 'calc(100vh - 50px)' : '100vh' }}>
        <Outlet />
      </div>
      {showTab && (
        <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: '#fff' }}>
          <TabBar activeKey={pathname} onChange={value => navigate(value)}>
            {tabs.map(item => (
              <TabBar.Item
                key={item.key}
                title={item.title}
                icon={
                  <img
                    src={pathname === item.key ? item.icon.active : item.icon.normal}
                    alt={item.title}
                    style={{ width: 22, height: 22 }}
                  />
                }
              />
            ))}
          </TabBar>
        </div>
      )}
    </div>
  )
}


